<template>
    <div class="campus-activities">
        <h2>校园活动</h2>
        <div class="activity-container">
            <div v-for="activity in activityData" :key="activity.id" class="activity-item" :style="{ backgroundImage: 'url(' + activity.image + ')' }">
                <div class="activity-content">
                    <div class="activity-info">
                        <h3>{{ activity.no }}</h3>
                        <p class="activity-time">{{ activity.time }}</p>
                    </div>
                    <p class="activity-designation">{{ activity.designation }}</p>
                    <router-link :to="{path: 'activities', query: {id:activity.id}}">查看详情</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import request from "@/util/request.js";

export default {
    data() {

        return {
            activityData:[],//未报名结束的活动
            page: {
                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示条数
                total: 0 // 总条数
            },
            activityName:'',
            activityPerson:'',
        };
    },
    created() {
        // 在组件创建时获取校园活动列表
        this.getgoingActivitys();
    },
    methods: {
        getgoingActivitys() {

          let url = `/info_activity/studentGetPage?pageNum=${this.page.currentPage}&pageSize=${this.page.pageSize}&activityName=${this.activityName}&activityPerson=${this.activityPerson}`;

            request.get(url)
                .then((res) => {
                    if (res.data.code === "200") {
                        let title = ""
                        this.activityData = res.data.data.records.map((id,index) => (
                            title = parseInt(index)+1,
                            {
                                id:id.id,
                                no: '活动' + title,//活动几
                                time: id.activityTime,//活动开始时间
                                designation: id.activityName,//活动名称
                                image: 'https://picsum.photos/800/600?random='+index,
                        }));
                    }
                })
                .catch((err) => {
                });
        },

    }
};
</script>





<style scoped>
.campus-activities {
  text-align: center;
}

.activity-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  /* 添加滚动条样式 */
}

/* 修改滚动条样式 */
.activity-container::-webkit-scrollbar {
  width: 20px /* 修改滚动条宽度 */
}

.activity-container::-webkit-scrollbar-track {
  background: transparent; /* 设置滚动条轨道背景色 */
}

.activity-container::-webkit-scrollbar-thumb {
  background-color: rgba(147, 242, 243, 0.71); /* 设置滚动条thumb颜色 */
  border-radius: 7px; /* 设置滚动条thumb的圆角 */
  border: 1px solid #aaa; /* 设置滚动条thumb的边框 */
}

.activity-item {
  margin-right: 20px;
  flex: 0 0 auto;
  width: 300px;
  height: 550px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.activity-content {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.activity-info {
  margin-bottom: 10px;
}

.activity-time {
  font-size: 0.9rem;
  color: #666;
}

.activity-description {
  font-size: 1rem;
}

.activity-content a {
  color: #3498db;
  text-decoration: none;
  font-weight: bold;
}

.activity-content a:hover {
  text-decoration: underline;
}
</style>

